@import "./common";

$banner-link-color: theme-color(bcgold);
$banner-link-hover: lighten($banner-link-color, 10%);

main {
  padding-top: 0;
}

.breadcrumb.page-breadcrumb {
  margin: 1rem 0;
  padding: 0;
}

a.body-link, a.title-link, .breadcrumb a {
  border-bottom: 1px solid rgba($link-color, 0.8);
  margin-bottom: -1px;
  text-decoration: none;
  @include hover-focus {
    border-bottom-color: $link-hover-color;
    text-decoration: none;
  }
}

.title-link {
  font-size: 110%;
}

.hero-banner, .footer-detail {
  padding: 2px 0; // prevent margin collapse

  background: theme-color(primary);
  color: #fff;

  h1, .h1, h2, .h2 {
    font-weight: normal;
  }

  a:not(.btn) {
    color: $banner-link-color;
    @include hover-focus {
      color: $banner-link-hover;
    }
  }

  a.body-link, a.title-link, .breadcrumb a {
    border-bottom: 1px solid rgba($banner-link-color, 0.8);
    @include hover-focus {
      border-bottom-color: $banner-link-hover;
    }
  }
}

.footer-detail {
  border-top: 2px solid theme-color(bcgold);
  font-size: 0.95rem;
  + nav {
    border-top: none;
  }
}

.lead {
  font-weight: 300;
}

$small-header-ratio: 0.9;

@include media-breakpoint-down(sm) {
  h1, .h1 {
    font-size: ($h1-font-size * $small-header-ratio);
  }
  h2, .h2 {
    font-size: ($h2-font-size * $small-header-ratio);
  }
  h3, .h3 {
    font-size: ($h3-font-size * $small-header-ratio);
  }
  h4, .h4 {
    font-size: ($h4-font-size * $small-header-ratio);
  }
}
